<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('仪器列表')" />
</head>
<body class="gray-bg">
<section class="section-content">
    <div class="row">
        <div class="col-sm-2">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <i class="fa fa-info-circle"></i> 仪器信息
                </div>
                <div class="panel-body">
                    <ul class="list-group list-group-striped">
                        <div class="text-center" style="" th:style="'color: '+${instrument.status == '0'?'green':'red'}+';font-size: 16px;padding: 20px'">
                            <i class="fa fa-cog"></i>
                            <b class="font-noraml">[[${@dict.getLabel('sys_inst_status', instrument.status)}]]</b>
                        </div>
                        <li class="list-group-item"><i class="fa fa-institution"></i>
                            <b class="font-noraml">NAME：</b>
                            <p class="pull-right">[[${instrument.instName}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-sliders"></i>
                            <b class="font-noraml">TYPE：</b>
                            <p class="pull-right">[[${instrument.type}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-sliders"></i>
                            <b class="font-noraml">NOTICE：</b>
                            <textarea readonly style="resize: none;color:red;" rows="3" cols="20">[[${instrument.notice}]]</textarea>
                        </li>
                        <li class="list-group-item"><i class="fa fa-sliders"></i>
                            <b class="font-noraml">LOG：</b><br>
                            <div th:each="log : ${instrument.instLogs}" th:text="${#dates.format(log.time,'yyyy-MM-dd')}+' : '+${log.description}"></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-10">
            <div class="ibox-content">
                <div class="nav-tabs-custom">
                    <ul id="expTab" class="nav nav-tabs">
                        <li class="active"><a href="#inst_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                        <li><a href="#autoexp" data-toggle="tab" aria-expanded="false">自动化实验</a></li>
                    </ul>
                    <div class="tab-content">
                        <!--基本资料-->
                        <div class="tab-pane active" id="inst_info">

                        </div>

                        <!--自动化实验-->
                        <div class="tab-pane" id="autoexp">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var statusDatas = [[${@dict.getType('sys_inst_status')}]];
    var instId = [[${instrument.instId}]];
    var expCode = [[${expCode}]];
    var isHighlight = [[${isHighlight}]];
    var prefix = ctx + "system/inst";

    $(function() {
        var options = {
            url: prefix + "/autoExp",
            showSearch: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            undefinedText: '',
            onLoadSuccess: function (data){
                onLoadSuccess(data);
            },
            // onClickRow : function(row, $element) {
            //     detailFormatter(row, $element);
            // },
            queryParams : {
                instId: instId
            },
            columns: [
                {
                    field: 'slot',
                    title: 'slot'
                },
                {
                    field: 'status',
                    title: 'Status',
                    formatter: function(value, row, index) {
                        return '<i class="fa fa-thermometer" style="color: blue">  '+value+'</i>';
                    }
                },
                {
                    field: 'user',
                    title: 'User'
                },
                {
                    field: 'autoexpName',
                    title: 'Name'
                },
                {
                    field: 'no',
                    title: 'No.'
                },
                {
                    field: 'solvent',
                    title: 'Solvent'
                },
                {
                    field: 'experiment',
                    title: 'Experiment'
                },
                {
                    field: 'tempspin',
                    title: 'Temp Spin'
                },
                {
                    field: 'stm',
                    title: 'STM'
                },
                {
                    field: 'shim',
                    title: 'Shim'
                },
                {
                    field: 'expLock',
                    title: 'Lock'
                },
                {
                    field: 'gain',
                    title: 'Gain'
                },
                {
                    field: 'param',
                    title: 'Param'
                },
                {
                    field: 'title',
                    title: 'Title'
                },
                {
                    field: 'startTime',
                    title: 'Start Time'
                },
                {
                    field: 'endTime',
                    title: 'End Time'
                }]
        };
        $.table.init(options);
    });

    // function detailFormatter(row, $element) {
    //     if(!row.flag){
    //         // console.log("show");
    //         row.flag = true;
    //         var html = [];
    //         $.each(row, function( key, value, index) {
    //             if(key == "autoExpinfos"){
    //                 $.each(value, function (key2, value2) {
    //                     var tds = [];
    //                     // var t = '<button class="btn btn-success btn-circle disabled" type="button"><i class="fa fa-check"></i></button>';
    //                     var t = '<i class="fa fa-check" style="color: #1a7bb9"></i>';
    //                     // var f = '<button class="btn btn-default btn-circle disabled" type="button"><i class="fa fa-times"></i></button>';
    //                     var f = '';
    //                     var tempspin = value2.tempspin == 1?t:f;
    //                     var stm = value2.stm == 1?t:f;
    //                     var shim = value2.shim == 1?t:f;
    //                     var expLock = value2.expLock == 1?t:f;
    //                     var gain = value2.gain == 1?t:f;
    //                     if(value2.startTime == null){
    //                         value2.startTime = "";
    //                     }
    //                     if(value2.endTime == null){
    //                         value2.endTime = "";
    //                     }
    //                     var index = key2
    //                     tds.push('<td class="start"></td>')
    //                     tds.push('<td>'+value2.status+'</td>')
    //                     tds.push('<td>'+value2.user+'</td>')
    //                     tds.push('<td>'+value2.autoexpName+'</td>')
    //                     tds.push('<td>'+value2.no+'</td>')
    //                     tds.push('<td>'+value2.solvent+'</td>')
    //                     tds.push('<td>'+value2.experiment+'</td>')
    //                     tds.push('<td>'+tempspin+'</td>')
    //                     tds.push('<td>'+stm+'</td>')
    //                     tds.push('<td>'+shim+'</td>')
    //                     tds.push('<td>'+expLock+'</td>')
    //                     tds.push('<td>'+gain+'</td>')
    //                     tds.push('<td></td>')
    //                     tds.push('<td>'+value2.title+'</td>')
    //                     tds.push('<td>'+value2.startTime+'</td>')
    //                     tds.push('<td class="end">'+value2.endTime+'</td>')
    //                     html.push('<tr id="'+value2.expCode+'" class="slot-'+value2.slot+'">'+tds+'</tr>')
    //                 })
    //             }
    //         });
    //         $element.after(html);
    //     }else {
    //         // console.log("hide");
    //         row.flag = false;
    //         var value = "slot-"+row.slot;
    //         $element.siblings('.'+value).remove();
    //     }
    //     showElementById();
    // }

    function onLoadSuccess(data){
        $.each(data.rows, function (index, value){
            var html = [];
            $.each(value, function( key, value, index) {
                if(key == "autoExpinfos"){
                    $.each(value, function (key2, value2) {
                        var tds = [];
                        // var t = '<button class="btn btn-success btn-circle disabled" type="button"><i class="fa fa-check"></i></button>';
                        var t = '<i class="fa fa-check" style="color: #1a7bb9"></i>';
                        // var f = '<button class="btn btn-default btn-circle disabled" type="button"><i class="fa fa-times"></i></button>';
                        var f = '';
                        var tempspin = value2.tempspin == 1?t:f;
                        var stm = value2.stm == 1?t:f;
                        var shim = value2.shim == 1?t:f;
                        var expLock = value2.expLock == 1?t:f;
                        var gain = value2.gain == 1?t:f;
                        if(value2.startTime == null){
                            value2.startTime = "";
                        }
                        if(value2.endTime == null){
                            value2.endTime = "";
                        }
                        var index = key2
                        tds.push('<td class="start"></td>')
                        tds.push('<td>'+value2.status+'</td>')
                        tds.push('<td>'+value2.user+'</td>')
                        tds.push('<td>'+value2.autoexpName+'</td>')
                        tds.push('<td>'+value2.no+'</td>')
                        tds.push('<td>'+value2.solvent+'</td>')
                        tds.push('<td>'+value2.experiment+'</td>')
                        tds.push('<td>'+tempspin+'</td>')
                        tds.push('<td>'+stm+'</td>')
                        tds.push('<td>'+shim+'</td>')
                        tds.push('<td>'+expLock+'</td>')
                        tds.push('<td>'+gain+'</td>')
                        tds.push('<td></td>')
                        tds.push('<td>'+value2.title+'</td>')
                        tds.push('<td>'+value2.startTime+'</td>')
                        tds.push('<td class="end">'+value2.endTime+'</td>')
                        // console.log(tds);
                        html.push('<tr id="'+value2.expCode+'" class="slot-'+value2.slot+'">'+tds+'</tr>')
                    })
                }
            })
            var index = value.slot - 1;
            $("tr[data-index='"+index+"']").after(html);
        })

        showElementById();
    }

    function showElementById() {
        if(isHighlight){
            $('#expTab a[href="#autoexp"]').tab('show');

            if(expCode == null || expCode == ""){
                expCode = "1";
            }
            $("#"+expCode).css("background-color", "yellow");
            // $("#0a4b1892ff634375bab857f66cb6d271").css("background-color", "yellow");
        }
    }


</script>
</body>
</html>